<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../../include/tag.jsp" %>
<%@ page import="com.party.core.model.system.TargetType" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>${notebookType == null ? '添加' : '编辑'}笔记本类型</title>
    <%@include file="../../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/publish_form.css">
    <style>
        .tag-wrap-category {
            border: 1px solid #f1eeec;
            min-height: 45px;
            min-width: 300px;
            padding: 5px;
            float: left;
            margin-right: 10px;
        }

        .tag-wrap-category .tag-item-category {
            float: left;
            margin: 5px 10px 5px 5px;
            padding: 5px 10px;
            background: #fff0f3;
            position: relative;
        }

        .tag-wrap-category .tag-name-category {
            line-height: 25px;
            display: inline-block;
            vertical-align: middle;
            float: left;
            margin-right: 5px;
        }

        .tag-wrap-category .tag-item-category .category-opt {
            vertical-align: sub;
            color: #e8473f;
        }

        .tag-wrap-category .tag-item-category.active {
            color: #fff;
            background: #f4615c;
        }
    </style>
</head>
<body>
<!--头部-->
<%@include file="../../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <div class="add-form-content">
                <form id="myForm" class="layui-form mt20" method="post" action="${ctx}/member/notebook/type/save.do">
                    <input type="hidden" name="id" value="${notebookType.id}"/>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">笔记本<span class="f-verify-red">*</span></label>
                            <div class="layui-input-inline">
                                <select name="notebookId" lay-verify="notebookId" id="notebookId"
                                        lay-filter="notebookId">
                                    <option value="">请选择笔记本</option>
                                    <c:forEach var="notebook" items="${notebooks}">
                                        <option value="${notebook.id}" ${notebookId == notebook.id ? 'selected="selected"' : ''}>${notebook.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">笔记本类型名称<span class="f-verify-red">*</span></label>
                        <div class="layui-input-block"
                             style="width: calc(100% - 70%); float: left; margin-left: 0; margin-right: 10px;">
                            <input type="text" name="name" lay-verify="name" maxlength="30" autocomplete="off"
                                   placeholder="标题"
                                   class="layui-input" value="${notebookType.name}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input type="number" name="sort"
                                   class="layui-input" value="${notebookType.sort}"
                                   style="width: 200px;  float: left; margin-right: 10px;" lay-verify="sort">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
                            <a href="${ctx}/member/notebook/type/list.do?notebookId=${notebookId}" class="layui-btn layui-btn-primary">取消</a>
                        </div>
                    </div>
                </form>
            </div>
        </div><!--底部-->
        <%@include file="../../include/footer.jsp" %>
    </section>
</div>
<script>
    $(function () {
        var form,laydate;
        layui.use(['form'], function () {
            form = layui.form, laydate = layui.laydate;
            var formcache;
            //自定义验证规则
            form.verify({
                notebookId: function (value) {
                    if (value == "") {
                        return '请选择笔记本';
                    }
                },
                name: function (value) {
                    if (value == "") {
                        return '请填写笔记本类型名称';
                    }else{
                        if(value.length>20){
                            return '笔记本类型名称长度不能大于20';
                        }
                    }
                }
            });
            //监听提交
            form.on('submit', function (data) {
                submitForm(data);
            });

            function getFormData() {
                return util.serializeForm($('#myForm').serializeArray());
            }

            function submitForm(data) {
                txz.submitObject(data.elem, function (callBack) {
                    var formData = getFormData();
                    var action = $("#myForm").attr("action");
                    txz.ajaxRequest({
                        method: 'post',
                        url: action,
                        saveCache: true,
                        cacheObj: formcache,
                        params: formData,
                        callBack: function (res) {
                            typeof callBack === 'function' && callBack();
                            if (res.success) {
                                util.layerMsgSuccess("提交成功", function () {
                                    location.href = "${ctx}/member/notebook/type/list.do?notebookId="+res.data
                                });
                            } else {
                                util.layerMsgError("提交失败")
                            }
                        }
                    });
                })
            }
        });
    })


</script>
</body>
<script type="text/javascript">
    txz.initHeader({
        nav: [{
            name: '素材管理/笔记本/笔记本类型',
            href: '${ctx}/member/notebook/list.do'
        }, {
            name: '${notebook == null ? '添加' : '编辑'}笔记本类型',
            curr: true
        }],
        btns: [{
            name: '返回',
            href: '${ctx}/member/notebook/type/list.do?notebookId=${notebookId}',
            icon: 'back'
        }]
    });
</script>
</html>